<template>
<div>
<!-- 面包屑导航区域 -->
<el-breadcrumb separator-class="el-icon-arrow-right">
  <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
  <el-breadcrumb-item>商品管理</el-breadcrumb-item>
  <el-breadcrumb-item>商品分类</el-breadcrumb-item>
</el-breadcrumb>
<!-- 卡片视图区 -->
<el-card >
    <el-row>
        <el-col>
            <el-button type="primary" @click="showAddCateDialog">添加分类</el-button>
        </el-col>
    </el-row>
      <!-- 用户列表区域 -->
  <tree-table :data="catelist" :columns="columns" :selection-type="false"
  :expand-type="false" :show-index="true" border
  class="treeTable">
      <!-- 是否有效 -->
      <template slot="isok"  slot-scope="scope">
          <i class="el-icon-success" v-if="scope.row.cat_deleted == false "
          style="color: lightgreen;"></i>
          <i class="el-icon-error" v-else style="color: red;"></i>
      </template>
      <!-- 排序 -->
      <template slot="order"  slot-scope="scope">
         <el-tag size="mini" v-if="scope.row.cat_level == 0 ">一级</el-tag>
         <el-tag type="success" size="mini" v-else-if="scope.row.cat_level == 1 ">二级</el-tag>
         <el-tag type="warning" size="mini" v-else>三级</el-tag>
      </template>
      <!-- 操作 -->
      <template slot="opt"  slot-scope="scope">
          <el-button type="primary"  icon="el-icon-edit" size="mini"  @click="showEditDialog(scope.row.cat_id)">编辑</el-button>
          <el-button type="danger"  icon="el-icon-delete" size="mini" @click="removeRoleById(scope.row.cat_id)">删除</el-button>
      </template>
  </tree-table>
   <!-- 分页区域 -->
  <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="queryInfo.pagenum"
      :page-sizes="[1, 3, 6, 10]"
      :page-size="queryInfo.pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
</el-card>
<!-- 添加分类的对话框 -->
<el-dialog
  title="添加分类"
  :visible.sync="addCateDialogVisible"
  width="50%" @close="addCateClosed">
 <!-- 添加分类的表单 -->
  <el-form :model="addForm" :rules="addFormRules" ref="addFormRef" label-width="100px">
  <el-form-item label="分类名称：" prop="cat_name">
    <el-input v-model="addForm.cat_name"></el-input>
  </el-form-item>
  <el-form-item label="父级分类：">
      <!-- options 用户指定数据源 -->
      <!-- props 用来指定配置对象 -->
      <el-cascader
    v-model="selectedKeys"
    :options="parentCateList"
    :props="cascaderProps"
    @change="parentCateChanged"
    expand-trigger="hover" clearable change-on-select></el-cascader>
  </el-form-item>
  </el-form>
  <span slot="footer" class="dialog-footer">
    <el-button @click="addCateDialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="addCate">确 定</el-button>
  </span>
</el-dialog>
<!-- 修改分类的对话框 -->
<el-dialog
  title="修改分类"
  :visible.sync="editDialogVisible"
  width="50%"
  @close="editDialogClosed">
  <!-- 内容主体区域 -->
  <el-form :model="editForm" :rules="editFormRules" ref="editFormRef" label-width="100px">
  <el-form-item label="分类名称" prop="cat_name">
    <el-input v-model="editForm.cat_name"></el-input>
  </el-form-item>
  </el-form>
  <!-- 底部区域 -->
  <span slot="footer" class="dialog-footer">
      <!-- 底部按钮区域 -->
    <el-button @click="editDialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="editCateInfo">确 定</el-button>
  </span>
</el-dialog>
</div> 
</template>

<script>
export default {
    data () {
        return {
            // 查询条件
            queryInfo: {
                type: 3,
                pagenum: 1,
                pagesize: 5
            },
            // 商品分类的数据列表，默认为空
            catelist: [],
            // 总数据条数
            total: 0,
            // 为table指定列的定义
            columns: [{
                label: '分类名称',
                prop: 'cat_name'
            },{
                label: '是否有效',
                // 表示， 将当前列定义为模板列
                type: 'template',
                // 表示当前这一列使用的模板名称
                template: 'isok'
            },{
                label: '排序',
                // 表示， 将当前列定义为模板列
                type: 'template',
                // 表示当前这一列使用的模板名称
                template: 'order'
            },{
                label: '操作',
                // 表示， 将当前列定义为模板列
                type: 'template',
                // 表示当前这一列使用的模板名称
                template: 'opt'
            }
          ],
        //   父级分类的数据列表
        parentCateList: [],
         // 控制修改分类对话框的显示与隐藏
         editDialogVisible: false,
        // 控制添加分类的显示与隐藏
        addCateDialogVisible: false,
        // 查询到的分类信息对象
            editForm: {},
            //修改表单验证规则对象 
            editFormRules: {
                cat_name: [
                    { required: true, message: '请输入分类名', trigger: 'blur' },
                    { min: 2, max: 10, message: '用户名长度在 2 到 10 个字符', trigger: 'blur' }
                ]
            },
        // 指定级联选择器的配置文件
        cascaderProps: {
            value: 'cat_id',
            label: 'cat_name',
            children: 'children'
        },
        // 选中的父级分类的ID数组
        selectedKeys: [],
         // 添加分类的表单数据
            addForm: {
                // 将要添加分类名称
                cat_name: '',
                // 父级分类的ID
                cat_pid: 0,
                // 分类层级，默认一级分类
                cat_level: 0
            },
            // 添加分类表单验证规则对象
             addFormRules: {
                cat_name: [
                     { required: true, message: '请输入分类名', trigger: 'blur' },
                     { min: 2, max: 10, message: '用户名长度在 2 到 10 个字符', trigger: 'blur' }
                ],
             }
        }  
    },
//部件
 components: {
 },
//静态
 props: {
 },
//对象内部的属性监听，也叫深度监听
 watch: {
 },
//属性的结果会被缓存，除非依赖的响应式属性变化才会重新计算。主要当作属性来使用；
 computed: { 
 },
//方法表示一个具体的操作，主要书写业务逻辑；
 methods: { 
    //  获取商品分类数据
  async getCateList() {
    const {data: res} = await this.$http.get('categories', {params: this.queryInfo});
    if (res.meta.status != 200) {
          return this.$message.error('获取商品分类失败');
      };
      console.log(res.data);
    //   把数据列表赋值给catelist
    this.catelist = res.data.result;
    // 为总数据条数赋值
    this.total = res.data.total;
    },
    // 监听 pagesize 改变的事件
    handleSizeChange(newSize) {
        this.queryInfo.pagesize = newSize
        this.getCateList()
    },
    // 监听 pagenum 的改变
    handleCurrentChange(newPage) {
        this.queryInfo.pagenum = newPage
        this.getCateList()
    },
    // 点击按钮， 展示添加分类对话框
    showAddCateDialog() {
        // 获取父级分类的数据列表
        this.getParentCateList()
        this.addCateDialogVisible = true 
    },
    // 获取父级分类的数据列表
   async getParentCateList() {
      const {data: res} = await this.$http.get('categories', 
      {params: {type: 2}})
       if (res.meta.status != 200) {
          return this.$message.error('获取父级分类的数据失败');
      }
      console.log(res.data)
      this.parentCateList = res.data;
    },
    // 选择项发生变化触发这个函数
    parentCateChanged() {
        console.log(this.selectedKeys);
        // 如果 selectedKeys 数组中的length大于0，说明选中了父级分类
        // 反之，说明没有选中父级分类
        if (this.selectedKeys.length > 0) {
            // 父级分类的ID
            this.addForm.cat_pid = this.selectedKeys
            [this.selectedKeys.length-1]
            // 为当前分类的等级赋值
            this.addForm.cat_level = this.selectedKeys.length
            return
        }else{
            // 父级分类的ID
            this.addForm.cat_pid = 0
            // 为当前分类的等级赋值
            this.addForm.cat_level = 0
        }
    },
         // 点击按钮，添加新的分类
    addCate() {
         this.$refs.addFormRef.validate(async valid => {
            if (!valid) return
            // 可以发起添加角色的网络请求
        const {data: res} = await this.$http.post('categories', this.addForm);
        if (res.meta.status != 201) {
          return this.$message.error('添加分类失败');
      }
      this.$message.success('添加分类成功');
    //   隐藏添加分类对话框
      this.addCateDialogVisible = false;
    //   刷新分类列表
      this.getCateList();
        });
    },
    // 监听添加分类对话框的关闭事件，重置表单数据
   addCateClosed() {
       this.$refs.addFormRef.resetFields();
       this.selectedKeys = [];
       this.addForm.cat_level = 0
       this.addForm.cat_pid = 0
   },
   // 展示编辑分类的对话框
   async showEditDialog(id) {
       this.editDialogVisible = true;
      console.log(id);
   const {data: res} = await this.$http.get('categories/' + id);
    if (res.meta.status != 200) {
          return this.$message.error('修改分类信息失败');
      }
      this.editForm = res.data;
      console.log(this.editForm)
    },
    // 监听修改分类对话框关闭事件
    editDialogClosed() {
        this.$refs.editFormRef.resetFields();
    },
    // 点击确定按钮，修改分类信息
    editCateInfo() {
        this.$refs.editFormRef.validate(async valid => {
            if (!valid) return
            // 可以发起修改分类信息的网络请求
        const {data: res} = await this.$http.put('categories/' + this.editForm.cat_id, this.editForm);
        if (res.meta.status != 200) {
          return this.$message.error('修改分类信息失败');
      }
      this.$message.success('修改分类信息成功');
    //   隐藏分类角色对话框
      this.editDialogVisible = false;
    //   刷新分类列表
      this.getCateList();
        });
    },
      // 删除分类提示
   async removeRoleById(id) {
    const confirmResult = await this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
         ).catch(err => err)
        //  如果用户确认删除，返回字符串confirm
        // 如果用户取消了删除，返回字符串cancle
        // console.log(confirmResult);
        if (confirmResult != 'confirm') {
            return this.$message.info('已取消删除!')
        } 
        // console.log('确认删除');
      const {data: res} = await this.$http.delete('categories/' + id);
      if (res.meta.status != 200) {
          return this.$message.error('删除分类失败');
      }
        this.$message.success('删除分类成功');
        this.getCateList();
      },
 },
//请求数据
 created() {
     this.getCateList();
}
 }
 </script>
<style lang="less" scoped>
.treeTable{
    margin-top: 15px;
}
.el-cascader{
    width: 100%;
}
</style>